<template>
    <div>

        <div class="search_bar clearfix">
            <a href="index.html" class="logo fl"><img src="images/logo.png"></a>
            <div class="sub_page_name fl">|&nbsp;&nbsp;&nbsp;&nbsp;购物车</div>
            <form method="get" action="/search.html" class="search_con fr mt40">
                <input type="text" class="input_text fl" name="q" placeholder="搜索商品">
                <input type="submit" class="input_btn fr" name="" value="搜索">
            </form>
        </div>

        <div class="total_count">全部商品<em></em>件</div>
        <ul class="cart_list_th clearfix">
            <li class="col01">商品名称</li>
            <li class="col03">商品价格</li>
            <li class="col04">数量</li>
            <li class="col05">小计</li>
            <li class="col06">操作</li>
        </ul>
        <ul class="cart_list_td clearfix" v-for="sku in cart_list" :key="sku.id">
            <li class="col01"><input type="checkbox" v-model="check_list" :value="sku.id"></li>
            <li class="col02"><img :src="'http://127.0.0.1:8000' +sku.goods_img"></li>
            <li class="col03">{{ sku.goods_name }}</li>
            <li class="col05">{{ sku.goods_price }}元</li>
            <li class="col06">
                <div class="num_add">
                    <a @click="add_num(sku.id)" class="add fl">+</a>
                    <input v-model="sku.goods_num" @focus="origin_input=sku.count" @blur="on_input(index)" type="text" class="num_show fl">
                    <a @click="min_num(sku.id)" class="minus fl">-</a>
                </div>
            </li>
            <li class="col07">{{sku.goods_price * sku.goods_num}}元</li>
            <li class="col08"><a @click="del_cart(sku.id)">删除</a></li>
        </ul>

        <ul class="settlements">
            <li class="col01"><input type="checkbox" @click="selectAll()" v-model="checked"></li>
            <li class="col02">全选</li>
            <li class="col03">合计(不含运费)：<span>¥</span><em>{{total}}</em><br>共计<b></b>件商品</li>
            <li class="col04"><a href="place_order.html">去结算</a></li>
        </ul>
    </div>
</template>

<script>
import axios from 'axios'
export default {
    name:'cart',
    data() {
        return {
            token:sessionStorage.getItem('token'),
            cart_list:[],
            check_list:[],
            checked:false,
            total:0
        }
    },
    methods: {
        // 删除购物车商品
        del_cart(goods_id){
            let from_Data = new FormData()
            from_Data.append('token',this.token)
            from_Data.append('goods_id',goods_id)

            axios({
                url:'http://127.0.0.1:8000/app03/del_cart',
                method:'post',
                data:from_Data
            }).then(res=>{
                console.log(res.data)
                this.get_cart()
            })            
        },
        // 合计
        totalSum(){
            for(let i in this.cart_list){
                console.log(i)
                this.total += parseInt(this.cart_list[i].goods_num) * parseInt(this.cart_list[i].goods_price) 
            }
            return this.total
        },
        //减少数量
        min_num(goods_id){
            let from_Data = new FormData()
            from_Data.append('token',this.token)
            from_Data.append('goods_id',goods_id)

            axios({
                url:'http://127.0.0.1:8000/app03/min_num',
                method:'post',
                data:from_Data
            }).then(res=>{
                console.log(res.data)
                this.get_cart()
            })            
        },
        //增加数量
        add_num(goods_id){
            let from_Data = new FormData()
            from_Data.append('token',this.token)
            from_Data.append('goods_id',goods_id)

            axios({
                url:'http://127.0.0.1:8000/app03/add_num',
                method:'post',
                data:from_Data
            }).then(res=>{
                console.log(res.data)
                this.get_cart()
            })
        },
        // 全选和反选
        selectAll(){
            if(this.checked){
                this.check_list = []        
                this.total = 0
            }else{
                this.cart_list.forEach(item =>{
                    this.check_list.push(item.id)
                    console.log(this.check_list)
                })
                this.totalSum()
            }
        },
        // 获取购物车展示商品
        get_cart(){
            if(this.token){
                // 登录成功后操作
                axios({
                    url:'http://127.0.0.1:8000/app03/show_cart',
                    params:{
                        'token':this.token
                    }
                }).then(res=>{
                    console.log(res.data)
                    this.cart_list = res.data.data
                })
            }else{
                // 登陆失败后去重新登录
                this.$router.push({
                    name:'login'
                })
            }
        }
    },
    created() {
        this.get_cart()
    }
}
</script>

<style scoped>

</style>
